<template>
  <div class="e-employee-list">
    <div class="none" v-if='isData'>您没有申请审批~~</div>
    <table class="see-tab" v-if='!isData'>
      <tr>
        <td width='20%'>申请人：</td>
        <td width='35%'>{{applyInfo.userName}}</td>
      </tr>
      <tr>
        <td v-if="applyInfo.applyRoleId">角色修改为：</td>
        <td v-if="applyInfo.applyRoleId">
          <div v-for='(val, index) in roleList' :key="index">
            <span v-if='val.value == applyInfo.applyRoleId'>{{val.label}}</span>
          </div>
        </td>
        <td v-if="applyInfo.applyDepartmentId">部门修改为：</td>
        <td v-if="applyInfo.applyDepartmentId">
          <div v-for='(val, index) in departList' :key="index">
            <span v-if='val.value == applyInfo.applyDepartmentId'>{{val.label}}</span>
          </div>
        </td>
      </tr>
      <tr>
        <td v-if="applyInfo.applyRoleId" > 角色处理意见：</td>
        <td v-if="applyInfo.applyRoleId" >
          {{applyInfo.applyRoleStatus == '0' ? '待审核'  : applyInfo.applyRoleStatus == '1' ? '同意' : '不同意'}}
        </td>
        <td v-if="applyInfo.applyDepartmentId" >部门处理意见：</td>
        <td v-if="applyInfo.applyDepartmentId">
          {{applyInfo.applyDepartmentStatus == '0' ? '待审核'  : applyInfo.applyDepartmentStatus == '1' ? '同意' : '不同意'}}
        </td>
      </tr>
      <tr v-if='applyInfo.applyRoleStatus != 0 && applyInfo.applyDepartmentStatus != 0'>
          <td v-if="applyInfo.applyRoleId" >角色审批回复：</td>
          <td v-if="applyInfo.applyRoleId" > {{applyInfo.roleCause}} </td>
          <td v-if="applyInfo.applyDepartmentId">部门审批回复：</td>
          <td v-if="applyInfo.applyDepartmentId"> {{applyInfo.departmentCause}} </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { apiSystemMange } from 'js/api'
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      isData: false,
      applyInfo: {
        // id: '',
        // applyRoleId: '1',
        // applyRoleStatus: '',
        // roleCause: '', 
        // applyDepartmentId: '2',
        // applyDepartmentStatus: '',
        // departmentCause: ''
      }
    }
  },
  created() {
    this.fetchRole({threeMenuCode: this.$route.query.three, token: this.token})
    this.fetchDepartList({threeMenuCode: this.$route.query.three, token: this.token})
    this._getApplyInfo()
  },
  computed: {
    ...mapGetters(['token', 'roleList', 'departList'])
  },
  methods: {
    ...mapActions(['fetchRole', 'fetchDepartList']),
    _getApplyInfo() {
      apiSystemMange.seeResult(this.token).then(data => {
        if (data.code != '200') return
        if (!data.data.length) {
          this.isData = true
        }
        this.applyInfo = data.data[0]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.e-employee-list {
  padding: 20px;
  table {
    // width: 65%;
    tr {
      height: 40px;
    }
  }
  .none {
    text-align: center;
    height: 130px;
    line-height: 130px;
    font-size: 16px;
  }
}
</style>